<template>
  <div class="fm-table-search">
    <el-form ref="formRef" :model="model" v-bind="proxy.$attrs">
      <el-row type="flex" :gutter="10" style="width: 100%;">
        <!-- 循环插槽 -->
        <template v-for="(item, index) in children" :key="index">
          <component :is="item" />
        </template>

        <!-- <slot /> -->
        <!-- 搜索按钮 -->
        <el-col :push="pushCol" :span="6" :lg="6" :md="8" :sm="12" :xl="6" :xs="24" class="fm-table-search-btn">
          <el-button type="primary" icon="Search" @click="emits('search')">搜索</el-button>
          <el-button icon="Refresh" @click="emits('reset')">重置</el-button>
          <el-button v-if="showTip" type="text" @click="handleToggle">{{ toggleBtn?'收起':'展开' }}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup name="fmTableSearch">
const { proxy } = getCurrentInstance();
import { computed, useSlots } from 'vue';
import { useWindowSize } from '@vueuse/core';
const slots = useSlots();
const { width } = useWindowSize();
const emits = defineEmits(['search', 'reset','change']);

// 过滤掉没有name的组件
const filterSlots = computed(() => {
	return slots.default().filter(item => typeof item.type !== 'symbol');
});


// 是否显示展开
const showTip = computed(() => {
	const { x } = getX();
	return ((x * 2) - 1) <  filterSlots.value.length;
});

// 有多少个子组件
const children = computed(() => {
	const { x } = getX();
	if(showTip.value && toggleBtn.value) {
		const arr = filterSlots.value.map((item,index) => {
			return {
				...item,
				name:'default' + index,
				index
			};
		});
		return arr;
	}else{
		const arr = filterSlots.value.slice(0, (x * 2) - 1).map((item,index) => {
			return {
				...item,
				name:'default' + index,
				index
			};
		});
		return arr;
	}
});


// 计算按钮需要向右移动多少
const pushCol = computed(() => {
	// 计算现在的屏幕一排能放多少个
	const { x,col } = getX();
  
	// 计算现在有多少个
	const count = filterSlots.value.length;
	// 计算需要几个col的宽度
	// 当为展开时
	if(toggleBtn.value) {
		// 展开时 如果没有余则自己新增一排到最右边
		if(count === (2 * x) || count % x === 0) {
			return 24 - col;
		}else{
			// 如果有余则取余数需要多少个位置
			const xuyao = x - 1 - ( count % x);
			// 计算多出来的
			return xuyao * col;
		}
	}else{
		// 收起时
	  	// 当总体的数量等于两排显示的总数的时候
		if(count >= (2 * x)) {
			return 0;
	  	// 当总体的数量等于两排显示的总数的时候
		}else if(count % x === 0) {
			return 24 - col;
		}else{
		// 当总体的数量小于两排显示的总数的时候
			const xuyao = x - 1 - ( count % x);
			// 计算多出来的
			return xuyao * col;
		}
	}

  	// 收起时
});


// 初始化按钮
const toggleBtn = ref(false);

function handleToggle() {
	toggleBtn.value = !toggleBtn.value;
	nextTick(() => {
		emits('change');
	});
};

const model = defineModel('model');


function getX() {
	let col = 6;
	if (width.value >= 1920 ) {
		col = 6;
	}else if (width.value >= 1200 && width.value < 1200) {
		col = 6;
	} else if (width.value >= 992 && width.value < 1200) {
		col = 8;
	} else if (width.value >= 768 && width.value < 992) {
		col = 12;
	} else if (width.value < 768) {
		col = 24;
	}
	// 计算现在的屏幕一排能放多少个
	const x = Math.floor(24 / col);
	return { x,col };
}

const formRef = ref(null);

defineExpose({
	formRef
});

</script>

<style lang="scss" scoped>
.fm-table-search {
  padding: 10px 0;
  :deep(.el-form-item){
    width: 100%;
  }
}
.fm-table-search-btn{
  text-align: right;
}
</style>